<!-- // 知识小册 -->
<template>
  <div class="knowledge">
    <template v-for="(item, index) in state.knowledgeList" :key="index">
      <know-book :item="item" />
    </template>
  </div>
  <div class="pagination">
    <a-pagination
      v-model:current="state.page"
      :total="26"
      @change="changePage"
    />
  </div>
</template>
<script lang="ts">
// 知识小册
import {
  GETKnowledge,
  delKnowledge,
  setKnowledge,
  newKnowledge,
  editKnowledge,
  echoKnowledge
} from '@/api/knowledge.js'
import { defineComponent, reactive, ref } from 'vue'
interface knowledgeListtType {
  [key: string]: string
}
interface stateType {
  knowledgeList: knowledgeListtType[]
  page: number
  pageSize: number
}
export default defineComponent({
  setup() {
    const state: stateType = reactive({
      knowledgeList: [],
      page: 1,
      pageSize: 10
    })
    //获取小册数据
    const get_knowledge = async () => {
      const res = await GETKnowledge({
        page: state.page,
        pageSize: state.pageSize
      })
      state.knowledgeList = res.data.data[0]
      // console.log(res)
    }
    // 页码的监听事件
    const changePage = () => {
      console.log(111)

      get_knowledge()
    }
    /**
     * @default 事件的调用
     */
    get_knowledge()
    return { state, changePage }
  }
})
</script>
<style>
.knowledge {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pagination {
  margin-top: 30px;
}
</style>
